<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右焦点图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 490px;
            height: 170px;
            padding: 5px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }
        .ab {
            width: 490px;
            height: 170px;
            position: relative;
            overflow: hidden;
        }
        ul {
            width: 500%;
            height: 170px;
            list-style: none;
            position: absolute;
            left: 0;
        }
        li {
            float: left;
        }
        span {
            display: inline-block;
            width: 16px;
            height: 16px;
            background-color: #fff;
            text-align: center;
            margin: 3px;
            border:  1px solid #ccc;
            line-height: 16px;
            cursor: pointer;
        }
        #arr {
            display: none;
        }
        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top:50%;
            margin-top: -20px;
            background: #000;
            opacity: 0.3;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-size: 30px;
            font-weight: bold;
            color: #fff;
            border: 1px solid #fff;
        }
        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>
</head>
<body>
<div class="box" id="box">
    <div class="ab">
        <ul id="imgs">
            <li><img src="images/01.jpg" alt=""/></li>
            <li><img src="images/02.jpg" alt=""/></li>
            <li><img src="images/03.jpg" alt=""/></li>
            <li><img src="images/04.jpg" alt=""/></li>
            <li><img src="images/05.jpg" alt=""/></li>
        </ul>
        <div id="arr">
            <span id="left"><</span>
            <span id="right">></span>
        </div>
    </div>

</div>
<script>
    window.onload = function () {

        var box = document.getElementById('box');
        var imgWidth = box.children[0].offsetWidth;
        var ul = box.children[0].children[0];
        var boxLeftRight = box.children[0].children[1];
        var btnArr = boxLeftRight.children;

        box.onmouseover = function () {
            boxLeftRight.style.display = 'block';
        };
        box.onmouseout = function () {
            boxLeftRight.style.display = 'none';
        }

        //2.点击右侧盒子图片向做移动并用计数器模拟index值。
        //定义计数器
        var index = 0;
        btnArr[0].onclick = function () {
            index--;
            if(index<0){
                index=0;
                alert('第一张');
            }
            animate(ul,-index*imgWidth);
        };
        btnArr[1].onclick = function () {
            index++;
            if(index>ul.children.length-1){
                index=ul.children.length-1;
                alert('到头了');
            }
            animate(ul,-index*imgWidth);
        };

        function animate(ele,target) {
            clearInterval(ele.timer);
            var speed = target>ele.offsetLeft?10:-10;
            ele.timer =  setInterval(function () {
                var val = target-ele.offsetLeft;
                ele.style.left = ele.offsetLeft+speed+'px';
                if(Math.abs(val)<Math.abs(speed)){
                    ele.style.left = target+'px';
                    clearInterval(ele.timer);
                }
            },10)

        }
        
    }
</script>
</body>
</html>